<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header style="margin:5px" :class="showBorder?'scroll_down':''">
      <!-- logo -->
      <router-link to="/" style="margin-top: 17px;">
        <el-image
          :src="logo"
          style="width: 101px; height: 33px;"
        />
      </router-link>

      <!-- 搜索框 -->
      <div class="search-container">
        <HeadSearch :search="search" @searchResultCallback="searchResultCallback" />
      </div>

      <!-- 用户信息 -->
      <div class="user-container">
        <el-button type="primary" size="mini" style="background-color: #4e71f2;margin:18px 0 0 24px">登录</el-button>
      </div>
    </el-header>

    <el-scrollbar ref="scrollbar">
      <!-- 页面区域 -->
      <el-main style="margin-left: 30px">
        <el-row>
          <el-col :span="18">
            <div v-for="item in searchResult" :key="item.codeNumber" class="result-container">
              <h3 class="t c-gap-bottom-small">
                <router-link :to="{ path: `/detail/${item.codeNumber}`}">
                  <a>
                    <em>{{ item.codeName }}</em>[{{ item.codeNumber }}]_基金实时行情
                  </a>
                </router-link>
              </h3>
              <div>
                <el-image lazy :src="`http://j4.dfcfw.com/charts/pic6/${item.codeNumber}.png`">
                  <div slot="error" class="image-slot">
                    <!--                    <i class="el-icon-picture-outline" />-->
                    <span style="color: #666666;margin-left: 25px">货币型基金无实时净值图哦~</span>
                  </div>
                </el-image></div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-scrollbar>

    <!-- 登录对话框 -->
    <el-dialog
      :visible.sync="loginDialogVisible"
      width="320px"
      title="用户名密码登录"
      :lock-scroll="false"
      center
      top="20vh"
      append-to-body
    >
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        label-position="left"
        label-width="0px"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="loginForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 53%"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode">
          </div>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
          记住我
        </el-checkbox>
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="loginDialogVisible = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="loginDialogVisible = false">确 定</el-button>-->
      <!--      </span>-->
    </el-dialog>
  </el-container>

</template>

<script>
import Logo from '@/assets/images/logo.png'
import Code from '@/assets/images/code.png'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import HeadSearch from '@/views/front/search/HeadSearch'

export default {
  name: 'Search',
  components: {
    HeadSearch
  },
  data() {
    return {
      // 登录表单数据
      loginForm: {
        // 用户名
        username: 'admin',
        // 密码
        password: '123456',
        // 验证码
        code: '',
        // 记住我
        rememberMe: false,
        // uuid
        uuid: ''
      },
      // 验证码图片链接
      codeUrl: Code,
      // 登录按钮loading状态
      loading: false,
      // 登录表单验证对象
      loginRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'change' }] // change数据改变时校验
      },
      redirect: undefined,
      // cookie中的加密密码
      cookiePass: '',
      loginDialogVisible: false,

      showBorder: false,
      logo: Logo,
      search: '',
      tops: ['诺安', '易方达', '白酒'],
      // 搜索选项数据
      options: [],
      result: [
        {
          name: '诺安成长混合',
          code: '320007',
          imgUrl: 'http://j4.dfcfw.com/charts/pic6/320007.png?v=20210306004110',
          url: 'http://fund.eastmoney.com/320007.html?spm=aladin'
        },
        {
          name: '易方达蓝筹精选混合',
          code: '005827',
          imgUrl: 'http://j4.dfcfw.com/charts/pic6/005827.png?v=20210306005554',
          url: 'http://fund.eastmoney.com/005827.html?spm=aladin'
        },
        {
          name: '招商中证白酒指数',
          code: '161725',
          imgUrl: 'http://j4.dfcfw.com/charts/pic6/161725.png?v=20210306004925',
          url: 'http://fund.eastmoney.com/161725.html?spm=search'
        },
        {
          name: '富国中证军工指数',
          code: '161024',
          imgUrl: 'http://j4.dfcfw.com/charts/pic6/161024.png?v=20210306012739',
          url: 'http://fund.eastmoney.com/161024.html?spm=search'
        }
      ],
      searchResult: []
    }
  },
  mounted() {
    this.handleScroll()
    this.search = this.$route.query.search
    this.redirect = this.$route.fullPath
    this.searchResult = this.$route.params.callbackArr
  },
  methods: {
    // 搜索组件回调事件
    searchResultCallback(result) {
      this.searchResult = result
    },

    // 查询所有基金
    queryFunds() {
      // queryAll().then(res => {
      //   this.searchPool = res.content
      // })
    },

    // 点击标签，赋值给输入框，并聚焦
    clickTag(itemName) {
      this.search = itemName
      this.$refs.searchRef.focus()
    },

    querySearch() {

    },

    change() {

    },

    handleScroll() {
      const vm = this
      const scrollbarEI = this.$refs.scrollbar.wrap
      scrollbarEI.onscroll = function() {
        if (scrollbarEI.scrollTop > 10) {
          vm.showBorder = true
        } else {
          vm.showBorder = false
        }
      }
    },

    openLoginDailog() {
      this.loginDialogVisible = !this.loginDialogVisible
    },

    // 点击验证码图片，获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },

    // 获取用户名密码等cookie
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },

    // 处理登录事件
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          // 调用Vuex Action：Login
          this.$store.dispatch('Login', user).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        } else {
          console.log('提交错误！')
          return false
        }
      })
    },

    // token过期提示
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录',
          type: 'warning',
          duration: 5000
        })
        Cookies.remove('point')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-parent {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.el-container, .el-row {
  width: 100%;
  height: 100%
}

.el-header {
  z-index: 10;
  padding-left: 16px;
  padding-right: 0;
  margin: 0 !important;
  height: 70px !important;
  display: flex;
  justify-content: flex-start;
}

.search-container {
  margin: 15px 0 15px 16px;
}

.user-container{
  height: 60px;
  margin: 4px 3px 0 0;
  padding-right: 24px;
  z-index: 301;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
}
// 下拉显示
.scroll_down {
  box-shadow: 0 0 5px #888;
}

.el-main {
  height: 100%;
  padding: 0;
}

//隐藏横向滚动条
.el-scrollbar {

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

}

.el-row, .el-col {
  height: 100%
}

.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.col-center {
  //display: flex;
  //justify-content: center;
  //align-items: center;
}

.bg-purple {
  //background: #3A71A8;
}

.grid-content {
  display: flex;
  align-items: center;
  //display: flex;
  //flex-direction: row;
  //
  //flex-wrap: nowrap;

  border-radius: 4px;
  min-height: 50px;
  max-height: 50px;
}

.grid-content-tip {
  border-radius: 4px;
  min-height: 24px;
  color: #666666;
  font-size: 15px;
}

.input-with-select {
  margin-top: 15px;
  width: 500px;
  min-width: 500px;

  .el-input-group__prepend {
    width: 592px;
    height: 40px;
    background-color: #fff;
  }

  .el-button {
    font-size: 16px;
    width: 112px;
    height: 36px;
    color: #fcf7f7;
    background: #4e6ef2;
  }
}

.search-tips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
  font-size: 13px;
  color: #666666;
  width: 100%;
}

.search-result {
  color: #999999;
  font-size: 13px;
  height: 41px;
  line-height: 41px;
}

.c-gap-bottom-small {
  margin-bottom: 5px;
}

.t {
  margin-left: 25px;
  text-decoration: underline;
  font-weight: 400;
  font-size: medium;
  margin-bottom: 10px;
}

.header-search-select {
  font-size: 18px;
  transition: width 0.2s;
  //width: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  width: 400px;
  margin-left: 0;

  ::v-deep .el-input__inner {
    border-radius: 10px 0 0 10px;
    //border-color: #4e6ef2;
    border: 2px solid #4e6ef2;
    //border: 0;
    //padding-left: 0;
    //padding-right: 0;
    //box-shadow: none !important;
    //border-bottom: 1px solid #d9d9d9;
    vertical-align: middle;
    //height: 0px;
    height: 38px;
    cursor: text !important;

  }
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: #4e6ef2;
}

.search-button {
  font-size: 16px;
  background: #4e6ef2;
  //border: ;
  border-radius: 0 5px 5px 0;
  margin-left: -1px;
  //border-top-left-radius: 0px; // 右上角圆角
  //border-bottom-left-radius: 0px; // 右上角圆角
  //border-top-right-radius: 10px; // 右上角圆角
  //border-bottom-right-radius: 10px; // 右下角圆角

}

a {
  font-size: 18px;
  color: #2440b3;
  text-decoration: underline;
}

em {
  color: #f73131;
  font-style: normal;
}

.row-right-col-center {
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 260px;
  padding: 0px 1px 5px 10px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 32px;
    width: 15px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 43%;
  display: inline-block;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
